import { ObjectType } from "esy-tools"
import { Table } from "esy-ui"
import React from "react"

export const Demo = ({ columns, data, bordered, getRowCls }: ObjectType) => {
    return (
        <div className="h-72">
            <Table columns={columns} data={data} bordered={bordered} getRowCls={getRowCls} />
        </div>
    )
}

export const columns = [
    { key: "age", title: 123, className: "" },
    { key: "name", title: 234, className: "" },
    { key: "sex", title: 567, className: "" },
    {
        key: "rob",
        title: 890,
        className: ""
    }
]

export const data = [
    { age: 123, name: 123, sex: 1, rob: 4 },
    { age: 234, name: 234, sex: 2, rob: 4 },
    { age: 567, name: 567, sex: 3, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 }
]

export const demoJson = (str = "") => `
import { Table } from "esy-ui"
import React from "react"

const columns = [
    { key: 'age', title: 123, className: '' },
    { key: 'name', title: 234, className: '' },
    { key: 'sex', title: 567, className: '' },
    {
        key: 'rob',
        title: 890,
        className: '',
    },
];

const data = [
    { age: 123, name: 123, sex: 1, rob: 4 },
    { age: 234, name: 234, sex: 2, rob: 4 },
    { age: 567, name: 567, sex: 3, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
    { age: 890, name: 890, sex: 4, rob: 4 },
];

export const Demo = ({ columns, data, bordered, getRowCls }:any) => {
    return (
        <div className="h-72">
            <Table ${str} />
        </div>
    )
}
`
